<template>
    <!-- 
        页面以 QS （勤瘦） 为主命名
        每个页面再根据页面内容，添加不同命名后续 （如登录页 - loading）
        页面内命名都以本页面主题为开头，加功能后缀 如：loading-confirm-btn
        本页面主题:infor
     -->
    <div class="QS-content-template QS-infor">
        <el-form 
            :model="ruleForm" 
            :rules="rules" 
            ref="ruleForm" 
            label-width="100px" 
            class="demo-ruleForm element_form"
        >
            <el-form-item label="作者" prop="author">
                <el-input 
                    v-model="ruleForm.author"
                    placeholder="请输入作者姓名"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="关联地址" prop="itewebUrl">
                <el-input 
                    v-model="ruleForm.itewebUrl"
                    placeholder="请输入关联地址"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="关联公众号" prop="officialAccounts">
                <el-input 
                    v-model="ruleForm.officialAccounts"
                    placeholder="请输入关联公众号"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item label="封面图片" prop="imageUrl">
                <el-upload
                    class="avatar-uploader uploader_small"
                    :action="$commonFunc.imageAPI()"
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload">
                        <img v-if="$commonFunc.checkThePic(ruleForm.imageUrl)" :src="$commonFunc.checkThePic(ruleForm.imageUrl)" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="描述" prop="des">
                <el-input 
                    type="textarea"
                    :rows="5"
                    placeholder="请输入描述内容"
                    v-model="ruleForm.des"
                    clearable
                ></el-input>
            </el-form-item>
            <el-form-item class="element_btnBox">
                <el-button @click="goback">返回</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">{{confirmBtn}}</el-button>
            </el-form-item>
        </el-form>
        
    </div>
</template>

<script>

export default {
	components: {
	
    },
    props:{
        // subData:{
        //     type:Object,
        //     default:null
        // }
    },
	data(){
		return {
            subData:{},
            confirmBtn:'立即添加',
            ruleForm: {
                author: '',
                itewebUrl:'',
                officialAccounts:'',
                imageUrl:'',
                des:'',
            },
            rules: {
                author: [
                    { required: true, message: '请输入作者姓名', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                // itewebUrl: [
                //     { required: true, message: '请输入关联地址', trigger: 'blur' },
                //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],
                // officialAccounts: [
                //     { required: true, message: '请输入关联公众号', trigger: 'blur' },
                //     // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                // ],
                imageUrl: [
                    { required: true, message: '请选择封面图片', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
                des: [
                    { required: true, message: '请输入描述内容', trigger: 'blur' },
                    // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
                ],
            }
		}
    },
    mounted(){
        this.subData = this.$route.query.asubData;
        if(this.subData){
            this.confirmBtn = '确认修改';
            this.ruleForm = {
                author: this.subData.item.author || '',
                itewebUrl:this.subData.item.newSourceAddress || '',
                officialAccounts:this.subData.item.officialAccounts || '',
                imageUrl:this.subData.item.newPictireAddress || '',
                des:this.subData.item.newsBriefText || '',
            };

        }
    },
    methods:{
        // this.$router.push('/GDPLHasReturned');
        submitForm(formName) {
            this.addInformotion();
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        handleAvatarSuccess(res, file) {
            var _this = this;
            this.$commonFunc.limitImgWidth(this,file,{
                width:690,height:320
            },function(url){
                _this.ruleForm.imageUrl = url;
            });
            // this.ruleForm.imageUrl = file.response.data.filePath;
        },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        addInformotion(){
            this.$post("newsList/save",{
                id:this.subData?this.subData.item.id:'',//主键
                newPictireAddress:this.ruleForm.imageUrl,//资讯图片地址
                newSourceAddress:this.ruleForm.itewebUrl,//资讯原链接地址
                newsBriefText:this.ruleForm.des,//资讯简介文本
                // newsWeights:'',//权重参数
                isDeleted:'N',//是否删除
                author:this.ruleForm.author,//作者
                officialAccounts:this.ruleForm.officialAccounts,//关联的公众号
            }).then(res=>{
                console.log(res)
                if(res.code == 0){
                    this.$confirm('是否返回列表页?', '', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        // type: 'warning'
                    }).then(() => {
                        this.$router.go(-1);
                    }).catch(() => {        
                    });

                }else{
                    this.$alert('接口报错，请联系管理员', '', {
                        confirmButtonText: '确定',
                        // type: 'warning'
                    }).then(() => {
                    }).catch(() => {        
                    });
                }
            })
        },
        goback(){
            this.$router.go(-1);
        }
    }
}
</script>